<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import instance from '@/utils/serve'
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  fromInfo: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getDicData'): void
}>()

// 表单项
const saving = ref(false)
interface RuleForm {
  dict_id: string
  sql: string
  rootParentId: string
  db_name: string
}
const ruleFormRef = ref<any>()
const form = ref({
  db_name: '',
  sql: '',
  rootParentId: ''
})
const resetFrom = ref({
  db_name: '',
  sql: '',
  rootParentId: ''
})
const formRules = reactive<FormRules<RuleForm>>({
  db_name: [{ required: true, message: '请选择数据源' }],
  sql: [{ required: true, message: '请输入Sql语句' }]
  // rootParentId: [{ required: true, message: '请输入根节点值' }]
})

const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      // console.log('submit!', form.value)
      const params = {
        dictId: props.fromInfo.dict_id,
        sql: form.value.sql,
        dbName: form.value.db_name,
        rootParentId: form.value.rootParentId
      }
      await instance
        .post('/dict/importProps', params)
        .then((res: any) => {
          console.log(res)
          if (res.code == 0) {
            ElMessage({ message: '手动导入成功', type: 'success' })
          } else {
            ElMessage({ message: '手动导入失败', type: 'error' })
          }
        })
        .catch((err: any) => {
          console.log(err)
          ElMessage({ message: '手动导入失败', type: 'error' })
        })
        .finally(() => {
          saving.value = false
          emit('getDicData')
          emit('update:isShow', false)
        })
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
  // emit('update:isShow', false)
}
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value = resetFrom.value
  emit('update:isShow', false)
}
</script>
<template>
  <el-dialog title="手动配置" width="50%" :model-value="isShow" @close="Cancel(ruleFormRef)">
    <el-form :model="form" :rules="formRules" ref="ruleFormRef" label-width="auto">
      <el-form-item label="数据源" prop="db_name">
        <el-radio-group v-model="form.db_name">
          <el-radio :value="'doris'">doris</el-radio>
          <el-radio :value="'report'">report</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据导入语句" prop="sql">
        <el-input
          v-model="form.sql"
          placeholder="案例：
            select xxx as item_id,
                      xxx as item_value,
                      -- order_no 非必传
                      xxx as order_no,
                      -- parent_id 仅树形结构需要
                      xxx as parent_id
            from xxx"
          :rows="10"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="根节点值">
        <el-input v-model="form.rootParentId" placeholder="仅需要在树型结构传入参数" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span>
        <el-button @click="Cancel(ruleFormRef)">取消</el-button>
        <el-button type="primary" :loading="saving" @click="Confirm(ruleFormRef)">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="less"></style>
